<template>
  <a-modal
    v-if="modelValue"
    v-model:visible="modelValue"
    :title="t('org.user.userSelectTitle')"
    width="80%"
    @ok="handleOk"
  >
    <a-row :gutter="16">
      <a-col :xl="4" :xs="24">
        <div class="org-unit-tree-wrapper">
          <a-card :bordered="false">
            <org-dept-tree :show-action-icon="false" @dept-tree-select-change="deptTreeSelectChange"></org-dept-tree>
          </a-card>
        </div>
      </a-col>
      <a-col :xl="20" :xs="24">
        <qc-page-table
          ref="userPageTableRef"
          :columns="columns"
          :loadData="loadData"
          :rowKey="(record) => record[primaryKey]"
          :cardBordered="true"
          :bordered="true"
        >
          <template #toolbarTitle>
            {{ t('org.user.userTableTitle') }}
          </template>
          <template #toolbarButton>
            <a-input-search
              style="width: 250px"
              :placeholder="t('org.user.useSelectModalSearchPlh')"
              v-model:value="queryParam.likeAll"
              @search="search"
            ></a-input-search>
          </template>
          <template #customUserSex="{ text, record }">
            <a-tag :color="text == 'MAN' ? '#87d068' : '#f50'">
              {{ record.userSexDesc }}
            </a-tag>
          </template>
          <template #customUserBrithday="{ text }">
            {{ text ? d(text, 'short') : '' }}
          </template>
        </qc-page-table>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script lang='ts'>
import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
import userApi from '/@/api/org/user'
import { userTableColumns } from '/@/views/org/user/interface'
import { useI18n } from 'vue-i18n'
import { useModelPageTable } from '/@/kit/model-kit'
import OrgDeptTree from '/@/views/org/dept/component/dept-tree.vue'
import { isBlankForArray } from '/@/kit/blank-kit'
import { message } from 'ant-design-vue'
export default defineComponent({
  name: 'UserSelectModal',
  props: {
    value: {
      //是否显示modal
      type: Boolean,
      default: false,
    },
    roleId: String, //非必填
  },
  components: {
    OrgDeptTree,
  },
  emits: ['update:value', 'selectUserOk'],
  setup(props, { emit }) {
    const { t, d } = useI18n()
    const userPageTableRef = ref(null)
    const queryParam = {
      deptId: null,
      excludeRoleId: props.roleId,
      likeAll: null,
    }
    const { primaryKey, searchTable, loadData, getSelectRows } = useModelPageTable(
      userPageTableRef,
      userApi,
      queryParam
    )

    const modelValue = ref(props.value)
    //双向绑定v-model
    watch(
      () => props.value,
      (val) => {
        modelValue.value = val
      }
    )
    watch(modelValue, (val) => {
      emit('update:value', val)
    })

    const userState = reactive({
      queryParam,
      columns: userTableColumns,
      primaryKey,
      loadData,
      search: () => searchTable(),
      deptTreeSelectChange: (deptId: string) => {
        userState.queryParam.deptId = deptId
        userState.search()
      },
      //用户选择成功
      handleOk: () => {
        const userList = getSelectRows()
        if (isBlankForArray(userList)) {
          message.warning(t('org.user.notSelectedUser'))
          return
        }
        emit('selectUserOk', userList)
      },
    })
    return {
      t,
      d,
      userPageTableRef,
      modelValue,
      ...toRefs(userState),
    }
  },
})
</script>
<style lang='less' scoped>
.org-unit-tree-wrapper ::v-deep(.ant-card-body) {
  padding: 0px;
}
.org-query-list-table {
  margin-top: 16px;
}
</style>